<template>
  <div class="mainbox"  :style="{backgroundImage: 'url(' + dpimg + ')'}">
  <div class="main_bg">
    <div class="content_box">
      <div class="gohome">
        <div class="item to_home" :style="{backgroundImage: 'url(' + home + ')'}" @click="gohome">首页</div>
        <div class="item to_back" @click="goback">返回</div>
      </div>
      <div class="menu_list">
        <slot name="menu_list"></slot>
      </div>
      <div class="inner_box">
        <div class="inner_box_main" :style="{backgroundImage: 'url(' + line_bg + ')'}">
          <div class="title" :style="{background:line_title_bg ,color: colors,border:colors,border: '2px',border:'solid'}">{{catname}}</div>
          <div class="inner_content">
            <slot name="inner_content"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
  export default {
    name: "mainContent",
    props:{
      catname:{
        type:String,
        default:"标题"
      }
    },


    data(){
      return{
        colors:'',
        dpimg:'',
        home:'',
        line_bg:'',
        line_title_bg:'',

        father: null,
        did:null,

      }
    },
    created(){

      this.line_bg=this.$util.storage.get("line_bg");
      this.dpimg=this.$util.storage.get("dpimg");
      this.home=this.$util.storage.get("home_img");
      this.colors=this.$util.storage.get("color");
      this.line_title_bg=this.$util.storage.get("line_title_bg");

      // 1、从菜单拿到当前页面的ID
      let that = this;
      if (!that.$route.query.pid){
        that.father=null;
        return;
      }
      let params = {
        id:that.$route.query.pid,
        vollege_id:that.$util.vollege_id
      };
      that.$http.get("/api/PcData/getParent",params,r=>{
        console.log('上一级页面的信息为：',r.data);
        that.father=r.data;
      })
      // 2、调接口拿到父亲的链接信息
      // 3、点GOBACK的时候，根据接口父亲信息跳转到父亲页面

    },

    methods: {

      goback(){
        let that = this;
        //目前遇到的问题，如果父栏目是一个链接子栏目也是一个链接，返回时候会跳转两次咋搞（@欧阳阳）
        //判断是否有父亲，如果有，则根据父亲提供的参数跳转到相应的链接
        //如果没有父亲，则跳转回首页（但是除了详情页面外，跳转到上一页面this.$router.go(-1)）
        that.father ? that.hasFather() : that.noFather();
        that.father=null;
      },//当上一级别信息为null时还存在另外一些情况分别作出如下判断

      isVisit(){
        let that = this;
        if (that.$route.query.type=="visit") {
          console.log("that.$route.query.paths",that.$route.query.paths);
          that.$router.replace(that.$route.query.paths.fullPath)
        }
      },   //判断是否走访详情页面返回回去，如果是返回走访对应的栏目和相应的页面，下面的代码不执行

      hasFather(){
        let that = this;
        console.log('有父级信息');
        that.$router.replace({path:that.father.url,query:{pid:that.father.id,name:that.father.title}})
      },//有父级时也要做出相应的判断

      noFather(){
        let that = this;
        console.log('没有父级信息');
        that.$route.query.pid ? that.$router.replace("/index") : that.$router.go(-1)
      },//没有上一级别信息时的分裂判断

      gohome(){
        // console.log('点击率返回首页按钮！');
        this.$router.replace("/index");
      },//返回到首页

    }
  }
</script>

<style scoped>

  .main_bg {
    position: relative;
    padding-top: 60px;
  }

  .content_box {
    position: relative;
    width: 1713px;
    height: 830px;
    padding: 23px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .5);
    /*background: url(../../assets/images/banner/opacity.png);*/

  }

  .inner_box {
    padding: 23px;
    /*margin: 23px;*/
    background-color: #fff;
  }

  .inner_box_main {
    /*width: 1624px;*/
    width: 1387px;
    height: 746px;
    position: relative;
    /*background:url('../../assets/images/page/line_bg.png');*/
    /*background: #ffffff;*/
    /*background-repeat: no-repeat;*/

  }

  .menu_list{
    z-index: 999;
    position: absolute;
    top: 45px;
    right: 44px;
  }

  .inner_box_main .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -28px;
    /*margin-left: -118px;*/
    min-width: 236px;
    height: 56px;
    line-height: 50px;
    text-align: center;
    font-size: 36px;

    border-radius: 8px;
  }

  .inner_content {
    /*color:#6c6c6c;*/
  }

  .gohome {
    bottom: 20px;
    /*left: 30px;*/
    right: 54px;
    position: absolute;
    z-index: 101;
  }

  .gohome .item {
    display: inline-block;
    width: 90px;
    height: 90px;
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

  .to_home {
    background: url("../../assets/images/page/home.png");
    background-repeat: no-repeat;
  }

  .to_back {
    background: url("../../assets/images/page/back.png") no-repeat;
  }


</style>
